---
import { Map } from 'lucide-react';
import { listOfficialRoadmaps } from '../queries/official-roadmap';

export interface Props {
  relatedRoadmaps: string[];
}

const { relatedRoadmaps } = Astro.props;

const allRoadmaps = await listOfficialRoadmaps();
const relatedRoadmapsDetails = allRoadmaps.filter((roadmap) =>
  relatedRoadmaps.includes(roadmap.slug),
);
---

{
  relatedRoadmaps.length && (
    <div class:list={['border-t bg-gray-100']}>
      <div class='container'>
        <div class='relative -top-5 flex justify-between'>
          <span class='text-md flex items-center rounded-md border bg-white px-3 py-1 font-medium'>
            <Map className='text-black mr-1.5' size='17px' />
            Related <span class='hidden sm:inline'>Roadmaps</span>
          </span>
          <a
            href='/roadmaps'
            class='text-md rounded-md border bg-white px-3 py-1 font-medium hover:bg-gray-50'
          >
            <span class='hidden sm:inline'>All Roadmaps &rarr;</span>
            <span class='inline sm:hidden'>More &rarr;</span>
          </a>
        </div>

        <div class='flex flex-col gap-1 pb-8'>
          {relatedRoadmapsDetails.map((relatedRoadmap) => (
            <a
              href={`/${relatedRoadmap.slug}`}
              class='flex flex-col gap-0.5 rounded-md border bg-white px-3.5 py-2 hover:bg-gray-50 sm:flex-row sm:gap-0'
            >
              <span class='inline-block min-w-[195px] font-medium'>
                {relatedRoadmap.title.card}
              </span>
              <span class='text-gray-500'>{relatedRoadmap.description}</span>
            </a>
          ))}
        </div>
      </div>
    </div>
  )
}
